<template>
    <el-dialog
        title="系统设置"
        v-bind:="{...$props,...$attrs}"
    >
      <div class="setting-box">
        <div class="setting-menu">
          <el-input v-model="filterText" placeholder="Filter keyword" size="small"/>
          <el-tree
              :data="data"
              ref="treeRef"
              :props="defaultProps"
              @node-click="handleNodeClick"
              :filter-node-method="filterNode"
          />
        </div>
        <div class="setting-page">
          <component :is="com"></component>
        </div>
      </div>
      <template v-for="(item, key, index) in $slots" :key="index" v-slot:[key]>
        <slot :name="key"></slot>
      </template>
    </el-dialog>
</template>

<script setup lang="ts">

import {ref, watch} from "vue";
import {ElTree} from "element-plus";
import {useRouter} from "vue-router";


const router=useRouter()

interface SetNode {
  label: string
  name:string
  children?: SetNode[]
}

const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const com=ref('')
const handleNodeClick = (data: SetNode) => {
  console.log(data)
  com.value=data.name
  console.log(com.value)
}

watch(filterText, (val) => {
  treeRef.value!.filter(val)
})

const filterNode = (value: string, data: SetNode) => {
  if (!value) return true
  return data.label.includes(value)
}

const data: SetNode[] = [
  {
    label: '首选项',
    name:'',
    children: [
      {
        label: '主题',
        name:'ThemeSetting',
        children: [
        ]
      }
    ]
  }
]

const defaultProps = {
  children: 'children',
  label: 'label',
}
</script>

<style scoped>
.setting-box{
  height: 100%;
  display: flex;
}
.setting-box>div{
  margin-right: 10px;
}
.setting-menu{
  width: 20%;
  height: 400px;
}
.setting-page{
  width: 80%;
  height: 400px;
  overflow: auto;
}
</style>